import { useContext } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import styled from "styled-components";
import { AppContext } from "./providers";
import { RouteProps, routes } from "./route";
import { history, HistoryRouter } from "./util/history";

const loopRoute = (list: RouteProps[] = []) => {
	return list.map(({ path, element: Element, children, redirect }, index) => {
		return (
			<Route key={index} path={path} element={redirect ? <Navigate to={redirect} replace /> : !!Element && <Element />}>
				{loopRoute(children)}
			</Route>
		);
	});
};
const App = () => {
	const { themeCongifg } = useContext(AppContext);
	return (
		<StyledApp colorPrimary={themeCongifg?.token?.colorPrimary}>
			<HistoryRouter history={history}>
				<Routes>{loopRoute(routes)}</Routes>
			</HistoryRouter>
		</StyledApp>
	);
};

export default App;
const StyledApp = styled.div<{ colorPrimary?: string }>`
	.ant-btn-primary {
		/* 修复antd5.0 primary按钮不显示颜色的问题 */
		background-color: ${({ colorPrimary }) => colorPrimary || "#3C89FF"}!important;
	}
`;
